import React, { Component } from 'react'
import { Link, withRouter } from 'react-router-dom'
import { Menu, Icon } from 'antd';

import menuConfig from '../../config/menuConfig'
import logo from '../../assets/images/logo.png'
import memoryUtils from "../../utils/memoryUtils";
import './index.less'
const { SubMenu } = Menu;
// 左侧导航的组件

class LeftNav extends Component {

    // 判断当前登陆用户对 item 是否有权限 
    hasAuth = (item) => {
        const {key, isPublic} = item;

        const menus = memoryUtils.user.role.menus;
        const username = memoryUtils.user.username;

        if(username === 'admin' || isPublic || menus.indexOf(key) !== -1) {
            return true
        }else if(item.children) {
            return !!item.children.find(child => menus.indexOf(child.key) !== -1)
        }

        return false
    }

    // 根据 menu 的数据数组生成对应的标签数组(为了做权限管理和扩展性) 
    // 1.使用数组的 map() 方法 + 递归调用
    getMenuNodes = (menuConfig) => {

        // 得到当前请求的 path
        const path = this.props.location.pathname

        // console.log(menuConfig);
        return menuConfig.map(item => {
            if(!item.children) {
                return (
                    <Menu.Item key={item.key}>
                        <Link to={item.key}>
                            <Icon type={item.icon} />
                            <span>{item.title}</span>
                        </Link>
                    </Menu.Item>
                )
            }else {
                // 如果当前请求路由与当前菜单的某个子菜单的 key 匹配 , 将菜单的 key 保存为 openKey
                if(item.children.find(cItem => path.indexOf(cItem.key)===0)) {
                    this.openKey = item.key
                }
                return (
                    <SubMenu
                        key={item.key}
                        title={
                            <span>
                                <Icon type={item.icon} />
                                <span>{item.title}</span>
                            </span>
                        }
                    >
                        {this.getMenuNodes(item.children)}
                    </SubMenu>
                )
            }
        })
    }

    // 2.使用 reduce(上一次处理的值, 初始值) + 递归调用
    getMenuNodes2 = (menuConfig) => {

        // 得到当前请求的 path
        const path = this.props.location.pathname

        return menuConfig.reduce((pre, item) => {
            if(this.hasAuth(item)) {
                // 向 pre 添加 <Menu.Item>
                if(!item.children) {
                    pre.push((
                        <Menu.Item key={item.key}>
                            <Link to={item.key}>
                                <Icon type={item.icon} />
                                <span>{item.title}</span>
                            </Link>
                        </Menu.Item>
                    ))
                }else {
                    // 如果当前请求路由与当前菜单的某个子菜单的 key 匹配 , 将菜单的 key 保存为 openKey
                    if(item.children.find(cItem => path.indexOf(cItem.key)===0)) {
                        this.openKey = item.key
                    }
                    pre.push((
                        <SubMenu
                            key={item.key}
                            title={
                                <span>
                                    <Icon type={item.icon} />
                                    <span>{item.title}</span>
                                </span>
                            }
                        >
                            {this.getMenuNodes2(item.children)}
                        </SubMenu>
                    ))
                }
            }
            
            // 向 pre 添加 <Submenu>
            return pre;
        }, [])
    }

    /*
    在第一次 render() 之前执行一次
    一般可以在此同步为第一次 render() 准备数据
    */
   UNSAFE_componentWillMount() {
        // this.menuNodes = this.getMenuNodes(menuConfig)
        this.menuNodes = this.getMenuNodes2(menuConfig)
    }


    render() {

        // 当前选中的菜单项 key 数组
        let path = this.props.location.pathname;

        if(path.indexOf('/product') === 0) { // 当前请求的是商品或其子路由界面
            path = '/product';
        }

        // 找到需要展开当前选中SubMenu的项
        const openKey = this.openKey

        return (
            <div className="left-nav">
                <Link to='/home' className="left-nav-header">
                    <img src={logo} alt="logo"/>
                    <h1>硅谷后台</h1>
                </Link>
                <Menu
                    mode="inline"
                    theme="dark"
                    selectedKeys={[path]}
                    defaultOpenKeys={[openKey]}
                    >
                    {/* <Menu.Item key="1">
                        <Icon type="pie-chart" />
                        <span>首页</span>
                    </Menu.Item>
                    <SubMenu
                        key="sub1"
                        title={
                            <span>
                                <Icon type="mail" />
                                <span>商品</span>
                            </span>
                        }
                    >
                        <Menu.Item key="5">
                                <Icon type="mail" />
                                <span>商品管理</span>
                        </Menu.Item>
                        <Menu.Item key="6">
                                <Icon type="mail" />
                                <span>品类管理</span>
                        </Menu.Item>
                    </SubMenu> */}
                    {
                        // 方法1
                        // this.getMenuNodes(menuConfig)
                        // 方法2
                        this.getMenuNodes2(menuConfig)
                    }
                </Menu>
            </div>
        )
    }
}

export default withRouter(LeftNav)